<!-- 
 Copyright 2018 The MIT Internet Trust Consortium
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 
   http://www.apache.org/licenses/LICENSE-2.0
 
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->
<!-- policy: resource sets and claims -->

<script type="text/html" id="tmpl-resource-set-table">
    <div class="well well-small">
		<button class="btn btn-small refresh-table"><i class="icon-refresh"></i> <span data-i18n="common.refresh">Refresh</span></button>
    </div>

	<div id="resource-set-table-empty" class="alert alert-info" data-i18n="policy.rs-table.no-resource-sets">
		There are no resource sets registered. Introduce a protected to this authorization server to let it register some.
	</div>

    <table id="resource-set-table" class="table table-hover table-striped">
        <thead>
        </thead>
        <tbody>
        </tbody>
    </table>

    <div class="well well-small">
		<button class="btn btn-small refresh-table"><i class="icon-refresh"></i> <span data-i18n="common.refresh">Refresh</span></button>
    </div>

</script>

<script type="text/html" id="tmpl-resource-set">
    <td>
		<%- rs.name %>
   </td>

    <td>
        <span title="<%- client.clientId %>"><%- client.clientName != null ? client.clientName : ( client.clientId.substr(0,8) + '...' ) %></span>
		<div class="client-more-info-block"></div>
		<div class="scope-list"></div>
		<div><span class="text-warning" data-i18n="policy.rs-table.shared-with"><i class="icon-share"></i> Shared with:</span>
			<% if (!_.isEmpty(rs.policies)) { 
				%><span class="label label-info"><%- _.size(rs.policies) %></span>
			<% } else { %>
				<span class="label label-important" data-i18n="policy.rs-table.shared-nobody;[title]policy.rs-table.shared-nobody-tooltip" title="This resource is not accessible by anyone else, edit the policies and share it with someone.">NOBODY</span> 
			<% } %>

			
		</div>
    </td>

    <td>
		<div class="btn-group pull-right">
			<button class="btn btn-info btn-edit"><i class="icon-share icon-white"></i> <span data-i18n="policy.rs-table.sharing">Sharing Policies</span></button> &nbsp;
	        <button class="btn btn-danger btn-delete"><i class="icon-trash icon-white"></i> <span data-i18n="policy.rs-table.delete">Delete</span></button> &nbsp; 
		</div>
    </td>

</script>

<script type="text/html" id="tmpl-policy-table">
    <div class="well well-small">
        <button class="btn btn-small btn-success btn-add"><i class="icon-plus icon-white"></i> <span data-i18n="policy.policy-table.new">Add New Policy</span></button>
		<button class="btn btn-small btn-cancel"><i class="icon-list"></i> <span data-i18n="policy.policy-table.return">Return to list</span></button>
    </div>

	<div id="policy-info" class="alert alert-info" data-i18n="policy.policy-table.required-claims-info">
		Users that you share this resource will with need to be able to present the following claims in order to access the resource.
	</div>

	<div id="policy-table-empty" class="alert alert-danger" data-i18n="policy.policy-table.no-policies">
		There are no policies for this resource set: This resource set is inaccessible by others.
	</div>

    <table id="policy-table" class="table table-hover table-striped">
        <thead>
			<tr>
				<th data-i18n="policy.policy-table.required-claims">Required Claims</th>
				<th data-i18n="policy.rs-table.scopes">Scopes</th>
				<th></th>			
        </thead>
        <tbody>
        </tbody>
    </table>

    <div class="well well-small">
        <button class="btn btn-small btn-success btn-add"><i class="icon-plus icon-white"></i> <span data-i18n="policy.policy-table.new">Add New Policy</span></button>
		<button class="btn btn-small btn-cancel"><i class="icon-list"></i> <span data-i18n="policy.policy-table.return">Return to list</span></button>
    </div>

</script>

<script type="text/html" id="tmpl-policy">
    <td>
		<div class="well">
			<table class="table table-condensed">
				<tbody>
					<% _.each(claimsRequired, function(claim) { %>
					<tr>
						<td>
						<% _.each(claim.issuer, function(issuer) { %>
							<span class="label label-info"><%- issuer %></span>
						<% }); %>
						</td>
						<td>
							<%- claim.friendlyName ? claim.friendlyName : claim.name %>
						</td>
						<td>
							<%- JSON.stringify(claim.value) %>
						</td>
					</tr>
					<% }); %>
				</tbody>

			</table>
		</div>
   </td>

    <td>
		<div class="scope-list"></div>
    </td>

    <td>
		<div class="btn-group pull-right">
	        <button class="btn btn-default btn-edit"><i class="icon-share"></i> <span data-i18n="policy.policy-table.edit">Edit Policy</span></button> &nbsp; 
	        <button class="btn btn-danger btn-remove"><i class="icon-trash icon-white"></i> <span data-i18n="policy.policy-table.remove">Remove</span></button> &nbsp; 
		</div>
    </td>

</script>

<script type="text/html" id="tmpl-policy-form">

    <% if (policy.id == null) { %>
        <h1 data-i18n="policy.policy-form.new">New Policy</h1>
    <% } else { %>
        <h1 data-i18n="policy.policy-form.edit">Edit Policy</h1>
    <% } %>

   <div class="well well-small">
        <button class="btn btn-small btn-save btn-success"><i class="icon-ok-circle icon-white"></i> <span data-i18n="common.save">Save</span></button> &nbsp; 
		<button class="btn btn-small btn-cancel"><i class="icon-ban-circle"></i> <span data-i18n="common.cancel">Cancel</span></button>
    </div>

	<ul class="nav nav-tabs">
		<li class="active"><a data-target="#policy-webfinger-tab" data-toggle="tab" href="#" data-i18n="policy.policy-form.webfinger">Webfinger</a></li>
		<li><a data-target="#policy-advanced-tab" data-toggle="tab" href="#" data-i18n="policy.policy-form.advanced">Advanced</a></li>
	</ul>
	
<div class="tab-content">
	<div class="tab-pane active" id="policy-webfinger-tab">
		<div id="add-required-claim" class="well">
			<form class="form-horizontal">
				<fieldset>
					<input type="text" id="email" placeholder="email address" data-i18n="[placeholder]policy.policy-form.email-address" />
					<button class="btn btn-info btn-share"><i class="icon-share icon-white"></i> <span data-i18n="policy.policy-form.share-email">Share with email address</span></button>
				</fieldset>
			</form>
		</div>
	</div>

	<divdiv class="tab-pane" id="policy-advanced-tab">
		<div class="well">
			<form class="form-horizontal">
				<fieldset>
					<div id="issuers" class="control-group">
						<div class="controls">
						</div>
					</div>
					<div class="control-group">
						<div class="controls">
							<input type="text" id="name" placeholder="claim name" data-i18n="[placeholder]policy.policy-form.claim-name" />
							<input type="text" id="friendly-name" placeholder="friendly claim name" data-i18n="[placeholder]policy.policy-form.friendly-claim-name" />
						</div>
					</div>
					<div class="control-group">
						<div class="controls">
							<input type="text" id="value" placeholder="claim value" data-i18n="[placeholder]policy.policy-form.claim-value" />
							<select id="value-type">
								<option value="text" selected="selected" data-i18n="policy.policy-form.value-type-text">Text</option>
								<option value="number" data-i18n="policy.policy-form.value-type-number">Number</option>
								<option value="boolean" data-i18n="policy.policy-form.value-type-boolean">Boolean</option>
								<option value="json" data-i18n="policy.policy-form.value-type-json">JSON</option>
							</select>
						</div>
					</div>
					<div class="control-group">
						<div class="controls">
							<button class="btn btn-info btn-share-advanced"><i class="icon-share icon-white"></i> <span data-i18n="policy.policy-form.share-advanced">Add to claim set</span></button>
							<button class="btn btn-danger btn-clear"><i class="icon-trash icon-white"></i> <span data-i18n="policy.policy-form.clear-all">Clear all claims</span></button>
						</div>
					</div>
				</fieldset>
			</form>
		</div>

	</div>
</div>

	<form class="form-horizontal">
		<fieldset>

            <div class="control-group" id="scopes">
                <label class="control-label" data-i18n="common.scope">Scopes:</label>
                <div class="controls">
					<% _.each(rs.scopes, function(scope) { %>
                    <div>
                        <input type="checkbox" id="scope-<%- scope %>"
                            <%-($.inArray(scope, policy.scopes) > -1 ? 'checked' : '')%> value="<%- scope %>">
                        <label for="scope-<%- scope %>" class="checkbox"><%- scope %></label>
                    </div>
					<% }); %>
                </div>
            </div>

		</fieldset>
	</form>

			<table class="table table-striped table-hover">
				<tbody>
					<% _.each(policy.claimsRequired, function(claim) { %>
					<tr>
						<td>
						<% _.each(claim.issuer, function(issuer) { %>
							<span class="label label-info"><%- issuer %></span>
						<% }); %>
						</td>
						<td>
							<%- claim.friendlyName ? claim.friendlyName : claim.name %>
						</td>
						<td>
							<%- JSON.stringify(claim.value) %>
						</td>
					</tr>
					<% }); %>
				</tbody>

			</table>

   <div class="well well-small">
        <button class="btn btn-small btn-save btn-success"><i class="icon-ok-circle icon-white"></i> <span data-i18n="common.save">Save</span></button> &nbsp; 
		<button class="btn btn-small btn-cancel"><i class="icon-ban-circle"></i> <span data-i18n="common.cancel">Cancel</span></button>
    </div>

</script>

 